<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <comtent :list='pander'>
      <template slot-scope='index'>
        <!-- 3、子组件标签需要接收传递过来的数据，怎么接收？？？
                注意是固定写法 slot.scope 只要写了这个属性，就能够接收到传递过来的数据也就是hero===index
        -->
        <!-- 
          4、使用slot-scope 接收到传递过来的数据以后，就可以对传递过来的数据，进行判断，进行操作，
          从而对样式进行修改
         -->
        <span class='index.hero.id===1? active :""'>{{index.hero.name}}</span>
      </template>
    </comtent>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 具名插槽：具有名字的插槽，就是给slot标签添加一个name属性
    // 将组件标签中包裹的内容展示到指定的slot位置
    Vue.component('comtent', {
      props: ['list'],
      template: `
        <div>
          <li v-for='item in list' :key = 'item.id'>
          <!-- 1、给slot标签绑定一个属性，属性自定义，属性值是传递给父级的数据
               2、通过v-bind方式将值传递给子组件标签
           -->
            <slot :hero='item'></slot>
          </li>
        </div>
      `
    })


    var vm = new Vue({
      el: '#app',
      data: {
        pander: [{
          id: 1,
          name: '曹操'
        },
        {
          id: 2,
          name: '诸葛亮'
        }, {
          id: 3,
          name: '小乔'
        },
        ]
      },
    })
  </script>
</body>

</html>